@import url('https://fonts.googleapis.com/css?family=Open+Sans|PT+Sans+Narrow');
$in-out-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);

@mixin transform($transform...) {
    -webkit-transform: $transform;
    -moz-transform: $transform;
    -ms-transform: $transform;
    -o-transform: $transform;
    transform: $transform;
}

@mixin transform-origin($transform-origin...) {
    -webkit-transform-origin: $transform-origin;
    -moz-transform-origin: $transform-origin;
    -ms-transform-origin: $transform-origin;
    -o-transform-origin: $transform-origin;
    transform-origin: $transform-origin;
}

@mixin key-frame($name) {
    @-webkit-keyframes #{$name} {
        @content;
    }

    @-moz-keyframes #{$name} {
        @content;
    }

    @-o-keyframes #{$name} {
        @content;
    }

    /* Standard syntax */
    @keyframes #{$name} {
        @content;
    }
}

@mixin animation($animation...) {
    -webkit-animation: $animation;
    -moz-animation: $animation;
    -o-animation: $animation;
    animation: $animation;
}

@mixin animation-delay($animation...) {
    -webkit-animation-delay: $animation;
    -moz-animation-delay: $animation;
    -o-animation-delay: $animation;
    animation-delay: $animation;
}

.notFound {
    overflow: hidden;
    height: 100vh;
    position: relative;

    &>.goHome {
        position: absolute;
        top: 20px;
        right: 20px;
        z-index: 10;
        font-size: 20px;
        color: #fff;
    }

    &>.not-found {
        position: relative;
        overflow: hidden;
        margin: 0 -20vw;
        height: 110vh;

        [class*="wave"] {
            position: absolute;
        }

        div {
            position: absolute;
            width: 100%;
            bottom: 0;
            left: 0;

            @for $i from 1 through 7 {
                &.wave-#{$i} {
                    background: url(http://res.cloudinary.com/andrewhani/image/upload/v1524501869/404/wave-#{$i}.svg);
                }
            }

            &.sky-bg {
                background: url(http://res.cloudinary.com/andrewhani/image/upload/v1524821915/404/bg-1_gvybzk.svg);
                height: 100%;
            }

            &[class*="wave"]:not(.wave-4) {
                height: calc(100% - 250px);
            }

            &.wave-4 {
                height: calc(100% - 430px);
            }
        }

        .boat {
            position: absolute;
            top: 0;
            right: 15%;
            width: 150px;
            @include animation(boat 15s $in-out-cubic infinite);
        }

        .wave-lost {
            position: absolute;
            top: 20%;
            left: 50%;
            color: #fff;
            font-size: 20rem;
            @include animation(surf 2s);

            span {
                font-size: 300px;
                float: left;
                font-family: 'Open Sans', sans-serif;
                @include animation(float 3s ease-in infinite);

                &:nth-child(2) {
                    @include animation-delay(2.5s);
                }

                &:nth-child(3) {
                    @include animation-delay(4.5s);
                }
            }
        }

        .wave-island {
            position: absolute;
            top: 130px;
            left: 20%;
            padding: 10px;
            width: 170px;
        }
    }
}



@include key-frame(boat) {
    0% {
        @include transform-origin(left);
        @include transform(rotate(-15deg) translate3d(400px, 0px, 0px));
    }

    20% {
        @include transform-origin(left);
        @include transform(rotate(15deg) translate3d(-20vw, 0, 0px));
    }

    25% {
        @include transform-origin(left);
        @include transform(rotate(-7deg) translate3d(-25vw, 0, 0px));
    }

    50% {
        @include transform-origin(left);
        @include transform(rotate(5deg) translate3d(-50vw, 0, 0px));
    }

    60% {
        @include transform-origin(left);
        @include transform(rotate(-1deg) translate3d(-60vw, 0, 0px));
    }

    100% {
        @include transform-origin(left);
        @include transform(rotate(2deg) translate3d(-100vw, 0, 0px));
    }
}

@include key-frame(float) {

    0%,
    100% {
        @include transform(rotate(3deg) translate3d(0px, -10px, 0px));
    }

    50% {
        @include transform(rotate(-3deg) translate3d(0px, 10px, 0px));
    }
}

@include key-frame(surf) {
    0% {
        @include transform-origin(right);
        @include transform(rotate(15deg) translate3d(0, 800px, 0));
    }

    30% {
        @include transform-origin(right);
        @include transform(rotate(15deg) translate3d(0, 500px, 0));
    }

    100% {
        @include transform-origin(right);
        @include transform(rotate(0) translate3d(0, 0, 0px));
    }
}

@include key-frame(wave-message) {
    0% {
        @include transform(translate3d(0, 120%, 0));
    }

    100% {
        @include transform(translate3d(0, 0, 0));
    }
}